<template>
  <div class="listwrap">
    <div v-for="(item, index) in list" :key="item.title">
      <div
        class="list"
        @click="dis(index)"
        :class="active == index ? 'active' : null"
      >
        <span>{{ item.title }}</span>
        <span class="tubiao"></span>
      </div>
      <List
        :list="item.children"
        ref="list"
        :handleFinish="handleFinishAction"
        v-show="active == index"
      ></List>
    </div>
  </div>
</template>

<script>
import List from "./List.vue";
export default {
  name: "ListWrap",
  props: {
    list: Array,
  },
  data() {
    return {
      active: -1,
    };
  },
  components: {
    List,
  },
  methods: {
    handleFinishAction(value) {
      value.unshift({ title: this.list[this.active].title });
      this.$emit("finish", value[value.length - 1].title);
    },
    dis(index) {
      this.active = index;
      this.$refs.list.forEach((item, i) => {
        this.$refs.list[i].dis(false);
      });
      this.$refs.list[index].dis(true);
      this.$refs.list.forEach((item, i) => {
        this.$refs.list[i].diss(-1);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  background: #95afc0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #ccc solid;
  padding: 2vw 5vw;

  .tubiao {
    display: block;
    width: 8px;
    height: 8px;
    border-left: 2px #ccc solid;
    border-top: 2px #ccc solid;
    transform: rotate(45deg);
    transition: all 0.2s;
  }
  &.active {
    position: relative;
    background-color: #dcdde1;
    &::before {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      width: 5px;
      height: 100%;
      background: orange;
    }
    .tubiao {
      transform: rotate(225deg);
    }
  }

  .lists {
    padding-left: 20px;
  }
}
</style>